@import '../global/global';

.shortcuts-hint {
  margin-bottom: $ring-unit * 2;
  margin-top: $ring-unit * 2;
  width: 900px;
}

.shortcuts-hint__dialog {
  width: auto;
}

.shortcuts-hint__popup-header {
  padding-left: $ring-unit;
}

.shortcuts-hint__columns {
  margin-top: $ring-unit * 3;
  columns: 2 auto;
  line-height: 20px;
}

.shortcuts-hint__table {
  display: table;
  border-collapse: separate;
  border-spacing: 0 $ring-unit;
}

.shortcuts-hint__shortcuts-column {
  min-width: $ring-unit * 4;
}

.shortcuts-hint__shortcut-block {
  display: table-row-group;
  //Spacing between shortcuts block
  &:not(:first-child)::before {
    content: '';
    display: block;
    height: $ring-unit/2;
  }
}

.shortcuts-hint__search-input-wrapper {
  position: relative;
  width: $ring-unit * 30;
}

.shortcuts-hint__search-input {

}

.shortcuts-hint__search-icon {
  position: absolute;
  top: 0;
  right: 0;
  height: $ring-unit*2;
  width: $ring-unit*2;

  padding: 3px 4px 3px 5px;

  color: $ring-gray-color;
  user-select: none;
}

.shortcuts-hint__table-row {
  display: table-row;
}

.shortcuts-hint__table-title {
  display: table-row;
}

.shortcuts-hint__shortcut-cell {
  display: table-cell;
  padding-right: $ring-unit;
  max-width: $ring-unit * 22;

  text-align: right;
}

.shortcuts-hint__shortcut {
  white-space: nowrap;
  color: $ring-dark-gray-color;
  font-family: monospace;
}

.shortcuts-hint__hint {
  display: table-cell;
  padding-left: $ring-unit;
}

.shortcuts-hint__shortcuts-title {
  display: table-cell;
  padding-left: $ring-unit;
  font-size: 12px;
  color: $ring-dark-gray-color;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.shortcuts-hint__key-spacer {
  padding: 0 $ring-unit;
}
